<template>
    <div>
        <el-row class="app-toptool" type="flex">
            <el-col :span="16">
                <Search size="small" :search-visible="searchVisible" :search-data.sync="searchData" :search-form="searchForm" @refesh_list="searchgo" />
            </el-col>
            <el-col :span="8">
                <div class="btn-group" style="margin-bottom: 11px; float: right">
                    <div>
                        <el-button v-if="checkPermission('/order/serviceadd')" type="primary" size="small" icon="el-icon-plus" @click="add()">添加</el-button>
                        <el-button v-if="checkPermission('/order/servicedelete')" type="primary" :disabled="multiple" size="small" icon="el-icon-delete" @click="del(ids)">删除
                        </el-button>
                        <el-button v-if="checkPermission('/order/serviceadd')" type="success" size="small" icon="el-icon-plus" @click="exportExcel()">导出</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-tabs type="card" @tab-click="handleClick">
            <el-tab-pane :label="'待付款(' + countdata.statuscount1 + ')'" name="1" />
            <el-tab-pane :label="'待指派(' + countdata.statuscount2 + ')'" name="2" />
            <el-tab-pane :label="'待服务(' + countdata.statuscount3 + ')'" name="3" />
            <el-tab-pane :label="'已取消(' + countdata.statuscount4 + ')'" name="4" />
            <el-tab-pane :label="'已服务(' + countdata.statuscount5 + ')'" name="5" />
            <el-tab-pane :label="'售后(' + countdata.statuscount6 + ')'" name="6" />
            <!-- <el-tab-pane :label="'待估价(' + countdata.statuscount7 + ')'" name="7" /> -->
        </el-tabs>
        <div>
            <el-table id="table" ref="multipleTable" v-loading="loading" :row-class-name="rowClass" row-key="id" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :border="false" :stripe="true" class="eltable" :data="list"
                style="width: 100%" @selection-change="selection">
                <el-table-column align="center" type="selection" width="42" />
                <el-table-column align="left" label="订单号" show-overflow-tooltip width="140">
                    <template slot-scope="scope">
                        <span>{{ scope.row.order_num_alias }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" property="member.nickname" label="用户" show-overflow-tooltip width="118" />
                <el-table-column align="left" property="tel" label="联系号码" show-overflow-tooltip width="118" />
                <el-table-column align="left" property="sid" label="派单门店" show-overflow-tooltip width="118" />
                <!-- <el-table-column align="left" property="staff" label="派单师傅" show-overflow-tooltip width="130" />
                <el-table-column align="left" property="staff_tel" label="师傅电话" show-overflow-tooltip width="130" /> -->
                <el-table-column label="派单师傅" align="left" width="300">
                    <template v-if="scope.row.technical.length > 0" slot-scope="scope">
                        <div v-for="(im, idx) in scope.row.technical" :key="idx">
                            <div class="goodstext">
                                <div v-if="im.title">师傅{{ idx+1 }}：{{ im.title }}  {{ im.tel }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="订购服务" align="left" width="300">
                    <template v-if="scope.row.orderGoods.length > 0" slot-scope="scope">
                        <div v-for="(item, index) in scope.row.orderGoods" :key="index">
                            <div class="image__preview">
                                <el-image v-if="item.image" class="table_list_pic" :src="item.image" :preview-src-list="[item.image]" />
                            </div>
                            <div class="goodstext">
                                <div>{{ item.name + "\n" }}</div>
                                <div v-if="item.sku">{{ item.sku + "\n" }}</div>
                                <div v-if="item.quantity">数量：{{ item.quantity }}</div>
                                <div v-if="item.total">小计：{{ item.total }}</div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div>{{ scope.row.pay_subject }}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column align="left" property="yue_time" label="预约时间" show-overflow-tooltip width="200" /> -->
                <el-table-column align="left" property="mun" label="数量" show-overflow-tooltip width="100" />
                <el-table-column align="left" property="total" label="订单金额" show-overflow-tooltip width="100" />
                <el-table-column align="left" property="order_status" label="订单状态" show-overflow-tooltip width="100" />
                <el-table-column align="left" property="pay_time" label="支付时间" show-overflow-tooltip width="" />
                <el-table-column align="left" property="create_time" label="下单时间" show-overflow-tooltip width="" />
                <el-table-column label="支付方式" align="left">
                    <template slot-scope="scope">
                        <div>{{ scope.row.payment_code_name }}</div>
                        <div v-if="scope.row.payment_code == 'offline_pay'">
                            <el-button v-if="scope.row.order_status_id == 1" size="mini" type="primary" @click="offline(scope.row)">
                                <i class="el-icon-s-check" />支付凭证
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :fixed="$store.getters.device !== 'mobile' ? 'right' : false" label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <div v-if="scope.row.id">
                            <el-button v-if="
                  scope.row.order_status_id == 2 &&
                    checkPermission('/order/staff')
                " size="mini" type="primary" @click="staff(scope.row)">
                                <i class="el-icon-connection" />派单
                            </el-button>
                            <el-button v-if="
                  scope.row.order_status_id == 3 &&
                    checkPermission('/order/staff')
                " size="mini" type="primary" @click="staff(scope.row)">
                                <i class="el-icon-connection" />重新派单
                            </el-button>
                            <!-- <el-button
                v-if="
                  scope.row.order_status_id == 5 &&
                    checkPermission('/service/delivery')
                "
                size="mini"
                type="primary"
                @click="delivery(scope.row)" 136
              >
                <i class="el-icon-connection" />手动结算
              </el-button> -->
                            <el-button v-if="checkPermission('/order/servicedetail')" size="mini" type="primary" @click="detail(scope.row)">
                                <i class="el-icon-view" />详情
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
        </div>
        <!--查看详情-->
        <Detail :info="detailInfo" :show.sync="dialog.detailDialogStatus" size="small" @refesh_list="index" />
        <!--派单-->
        <Staff :info="staffInfo" :show.sync="dialog.staffDialogStatus" size="small" @refesh_list="index" />
        <!--确认下线收款-->
        <Offline :info="offlineInfo" :show.sync="dialog.offlineDialogStatus" size="small" @refesh_list="index" />
        <!--添加/修改-->
        <Add :info="updateInfo" :opentype="opentype" :show.sync="dialog.addDialogStatus" size="small" @refesh_list="index" />
    </div>
</template>
<script>
import Search from '@/components/common/Search'
import Pagination from '@/components/Pagination'
import Detail from '@/views/order/servicedetail.vue'
import Add from '@/views/order/serviceadd.vue'
import Offline from '@/views/order/offline.vue'
import Staff from '@/views/order/staff.vue'
// import { export_table_to_excel } from '@/vendor/Export2Excel'
import {
    confirm,
    param2Obj
} from '@/utils/common'
export default {
    name: 'Orderservice',
    components: {
        Search,
        Detail,
        Add,
        Staff,
        Offline,
        Pagination
    },
    data() {
        return {
            dialog: {
                detailDialogStatus: false,
                staffDialogStatus: false,
                addDialogStatus: false,
                offlineDialogStatus: false
            },
            ids: [],
            single: true,
            multiple: true,
            list: [],
            countdata: {
                statuscount1: 0,
                statuscount2: 0,
                statuscount3: 0,
                statuscount4: 0,
                statuscount5: 0,
                statuscount6: 0,
                statuscount7: 0
            },
            detailInfo: {},
            staffInfo: {},
            loading: false,
            ws: {},
            filename: '',
            opentype: 'add',
            updateInfo: {},
            page_data: {
                limit: 20,
                page: 1,
                total: 20
            },
            searchVisible: true,
            searchForm: [],
            searchData: {},
            offlineInfo: null
        }
    },
    mounted() {
        this.index()
        this.searchForm = [{
            type: 'Input',
            label: '关键词',
            prop: 'keyword',
            width: '230px'
        },
        {
            type: 'datetime',
            label: '创建时间',
            prop: 'create_time',
            width: '150px'
        }
        ]
    },
    methods: {
        exportExcel() {
            const tables = document.getElementById('table')
            const table_book = this.$XLSX.utils.table_to_book(tables)
            var table_write = this.$XLSX.write(table_book, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            })
            try {
                this.$FileSaver.saveAs(
                    new Blob([table_write], { type: 'application/octet-stream' }),
                    '服务订单.xlsx'
                )
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, table_write)
            }
            return table_write
        },
        searchgo() {
            this.page_data.page = 1
            this.index()
        },
        index() {
            const param = {
                path: this.$route.path,
                limit: this.page_data.limit,
                page: this.page_data.page
            }
            Object.assign(param, this.searchData)
            Object.assign(param, param2Obj(this.$route.fullPath))
            this.loading = true

            this.$api.post('/order/index', param).then(res => {
                this.countdata = res.countdata
                this.list = res.data.data
                this.page_data.total = res.data.total
                this.loading = false
            })
        },
        handleClick(tab, event) {
            this.searchData.status = tab.name
            this.index()
        },
        listUpdate(row, field) {
            if (row.id) {
                this.$api.post('/order/listUpdate', {
                    id: row.id,
                    [field]: row[field]
                }).then(res => {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    })
                })
            }
        },
        add() {
            this.opentype = 'add'
            this.dialog.addDialogStatus = true
        },
        update(row) {
            this.opentype = 'update'
            const id = row.id ? row.id : this.ids.join(',')
            this.$api.post('/order/getInfo', {
                id: id
            }).then(res => {
                this.dialog.addDialogStatus = true
                this.updateInfo = res.data
            })
        },
        detail(row) {
            const id = row.id ? row.id : this.ids.join(',')
            this.$api.post('/order/getInfo', {
                id: id
            }).then(res => {
                this.dialog.detailDialogStatus = true
                this.detailInfo = res.data
            })
        },
        staff(row) {
            const id = row.id ? row.id : this.ids.join(',')
            this.$api.post('/order/getInfo', {
                id: id
            }).then(res => {
                this.dialog.staffDialogStatus = true
                this.staffInfo = res.data
            })
        },
        delivery(row) {
            confirm({
                content: '确定要结算吗'
            }).then(() => {
                const id = row.id ? row.id : this.ids.join(',')

                this.$api.post('/order/delivery', {
                    id: id
                }).then(res => {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                    this.index()
                })
            }).catch(() => { })
        },
        offline(row) {
            const id = row.id ? row.id : this.ids.join(',')
            this.$api.post('/order/getInfo', {
                id: id
            }).then(res => {
                this.dialog.offlineDialogStatus = true
                this.offlineInfo = res.data
            })
        },
        del(row) {
            confirm({
                content: '确定要操作吗'
            }).then(() => {
                const ids = row.id ? row.id : this.ids.join(',')

                this.$api.post('/order/delete', {
                    id: ids
                }).then(res => {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                    this.index()
                })
            }).catch(() => { })
        },
        selection(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        rowClass({
            row,
            rowIndex
        }) {
            for (let i = 0; i < this.ids.length; i++) {
                if (row.id === this.ids[i]) {
                    return 'rowLight'
                }
            }
        }
    }
}
</script>
<style scoped>
.image__preview {
    float: left;
}

.goodstext {
    float: left;
    padding-left: 10px;
    width: 200px;
}

.table_list_pic {
    width: 60px;
    vertical-align: middle;
}
</style>
